<template>
    <a-modal
            title="附件预览"
            :visible="visible"
            width="1200px"
            @cancel="handleCancel"
    >

        <div v-if="showImage == true" class="dialog-body-content-base-style">
          <viewer :trigger="previewImage">
            <img alt="example" style="width: 100%" :src="previewImage"/>
          </viewer>
        </div>

        <div v-else-if="showAudio == true">
            <aplayer :music="videoUpload.music"></aplayer>
        </div>


        <div v-else-if="showPdf == true">
            <div align="center">
                <p class="arrow">
                    <a-button @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">上一页</a-button>
                    {{currentPage}} / {{pageCount}}
                    <a-button @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">下一页
                    </a-button>
                </p>
            </div>
            <pdf
                    :src="pdfSrc"
                    :page="currentPage"
                    @num-pages="pageCount=$event"
                    @page-loaded="currentPage=$event"
                    @loaded="loadPdfHandler"
                    class="pdfHeight">
            </pdf>
        </div>

        <div v-else-if="showVideo == true"
             class="dialog-body-content-base-style"
             style="justify-content: center; align-items: center">
            <video-player class="video-player vjs-custom-skin"
                          ref="videoPlayer"
                          :playsinline="true"
                          :options="playerOptions">
            </video-player>
        </div>

        <template slot="footer">
            <a-button key="submit" type="primary" @click="handleOk">
                确定
            </a-button>
        </template>

    </a-modal>
</template>
<script>
    import {sysFileExists, getMediaPath, getPdfPath} from '@/api/system'
    import {videoPlayer} from 'vue-video-player'
    import 'video.js/dist/video-js.css'
    import 'vue-video-player/src/custom-theme.css'
    import aplayer from 'vue-aplayer'
    import pdf from 'vue-pdf'
    import {getFileAccessHttpUrl} from '@/api/manage';
    import Viewer from 'v-viewer/src/component'
    import 'viewerjs/dist/viewer.css'

    var imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
    var doclist = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf'];
    var radioList = ['mp3', 'm4a'];
    var videoList = ['mp4', 'avi'];

    export default {
        name: 'previewSysFile',
        components: {
            videoPlayer,
            aplayer,
            pdf,
            Viewer
        },
        data() {
            return {
                showAudio: false,
                showImage: false,
                showPdf: false,
                showVideo: false,
                ModalText: 'Content of the modal',
                visible: false,
                previewImage: '',
                confirmLoading: false,
                //视频组件
                playerOptions: {
                    playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
                    autoplay: false, // 如果为true,浏览器准备好时开始回放。
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: false, // 是否视频一结束就重新开始。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [{
                        type: "video/mp4", // 类型
                        src: '' // url地址
                    }],
                    poster: '', // 封面地址
                    notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar: {
                        timeDivider: true, // 当前时间和持续时间的分隔符
                        durationDisplay: true, // 显示持续时间
                        remainingTimeDisplay: false, // 是否显示剩余时间功能
                        fullscreenToggle: true // 是否显示全屏按钮
                    }
                },
                //音频组件
                videoUpload: {
                    progress: false,
                    progressPercent: 0,
                    successPercent: 0,
                    music: {
                        title: '',
                        author: ' ',
                        url: '',
                        lrc: '[00:00.00]lrc here\n[00:01.00]aplayer',
                        //此处自定义音乐封面
                        //pic: '../../../static/images/top.png'
                    }
                },
                currentPage: 0, // pdf文件页码
                pageCount: 0, // pdf文件总页数
                fileType: 'pdf', // 文件类型
                pdfSrc: 'http://10.65.12.61:8080/group2/M00/01/66/CkEMPV_iUAaAaMMuAAhyLlYHQ4g716.pdf', // pdf文件地址
            };
        },
        methods: {
            previewFile(record){
                this.showFile(record.fileName, record.fileId, record.ext);
                },
            handleOk(e) {
                this.showAudio = false;
                this.showImage = false;
                this.showPdf = false;
                this.showVideo = false;
                this.visible = false;
                this.currentPage=1
            },
            handleCancel(e) {
                this.handleOk(e);
            },
            showFile(fileName, fileId, ext) {
                ext = ext.toLowerCase();
                //是图片
                if (this.checkFileExt(imglist, ext) == true) {
                    this.fileExists(fileId).then(res => {
                        if(res){
                        let param = {};
                        param.fileId = fileId;
                        getMediaPath(param).then(res => {
                            //获取url地址
                            let url = res.httpUrl;
                            if (res.localFile == true) {
                                url=getFileAccessHttpUrl(url)
                            }
                            //将url赋值给src
                            this.previewImage = url;

                            this.showImage = true;
                            // this.$emit('previewImg', this.previewImage);
                            this.visible = true;
                        })
                        } else {
                            this.$message.error('文件不存在！')
                            return false
                        }
                    });
                } else if (this.checkFileExt(doclist, ext)) {
                    this.fileExists(fileId).then(res => {
                        if (res) {
                            let param = {};
                            param.fileId = fileId;
                            getPdfPath(param).then(res => {

                                //获取url地址
                                let url = res.pdfPath;
                                if (res.localFile == true) {
                                    url=getFileAccessHttpUrl(url)
                                }

                                console.log(res.pdfPath)
                                this.pdfSrc = url;
                                this.showPdf = true;
                                this.visible = true;

                            })
                        } else {
                            this.$message.error('文件不存在！')
                            return false
                        }
                    });


                } else if (this.checkFileExt(radioList, ext)) {
                    //音频文件
                    this.fileExists(fileId).then(res => {
                        if (res) {
                            let param = {};
                            param.fileId = fileId;

                            getMediaPath(param).then(res => {
                                //获取url地址
                                let url = res.httpUrl;
                                if (res.localFile == true) {
                                    url=getFileAccessHttpUrl(url)
                                }
                                //将url赋值给src
                                this.videoUpload.music.url = url;

                                /*                                //上传者
                                                                this.videoUpload.music.author='';*/
                                //文件名赋值
                                this.videoUpload.music.title = fileName;

                                this.showAudio = true;
                                this.visible = true;
                            })


                        } else {
                            this.$message.error('文件不存在！')
                            return false
                        }
                    });
                } else if (this.checkFileExt(videoList, ext)) {
                    //视频文件
                    this.fileExists(fileId).then(res => {
                        if (res) {
                            let param = {};
                            param.fileId = fileId;

                            getMediaPath(param).then(res => {
                                console.log('获取视频', res)
                                //获取url地址
                                let url = res.httpUrl;
                                if (res.localFile == true) {
                                    url=getFileAccessHttpUrl(url)
                                }
                                //将url赋值给src
                                this.playerOptions['sources'][0]['src'] = url;
                                this.playerOptions['sources'][0]['type'] = "video/" + ext;

                                this.showVideo = true;
                                this.visible = true;
                            })


                        } else {
                            this.$message.error('文件不存在！')
                            return false
                        }
                    });

                } else {
                    //其他类型不支持
                    this.$message.warn('该类文件暂不支持预览！')
                }

            },
            checkFileExt(list, ext) {
                let result = list.some(function (item) {
                    return item == ext;
                });
                return result;
            },
            fileExists(fileId) {
                let param = {};
                param.fileId = fileId;
                return sysFileExists(param);
            },
            // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
            changePdfPage(val) {
                // console.log(val)
                if (val === 0 && this.currentPage > 1) {
                    this.currentPage--
                    console.log(this.currentPage)
                }
                if (val === 1 && this.currentPage < this.pageCount) {
                    this.currentPage++
                    console.log(this.currentPage)
                }
            },
            // pdf加载时
            loadPdfHandler(e) {
                this.currentPage = 1 // 加载的时候先加载第一页
            }
        }
    }
</script>

<style scoped>
    .main-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .canvas-container {
        width: 400px;
        height: 500px;
        border: 1px dashed black;
        position: relative;
        display: flex;
        justify-content: center;
    }

    .scroll-pdf-contanier {
        width: 400px;
        height: 500px;
        border: 1px dashed black;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
    }

    .pdf-container {
        width: 100%;
        height: 100%;
    }

    .scroll-pdf-container {
        width: 350px;
    }

    .pagination-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .ant-modal{
        top: 60px;
    }
    .pdfHeight{
        height: calc(100vh - 320px);
        overflow: auto;
    }
</style>
